<template>
  <ContentWrap>
  <div class="rating-container">
    <h2>最近一周挂号记录</h2>
    <div class="register-cards">
      <el-card 
        v-for="register in registerList" 
        :key="register.id"
        class="register-card"
        @click="openRatingForm(register)"
      >
        <div class="card-content">
          <div class="doctor-info">
            <h3>{{ register.doctorName }}</h3>
            <div class="info-text">
              
              <p>{{ register.deptName }}</p>
              <p>{{ formatDate(register.date) }}</p>
              <p>{{ formatTime(register.consultingTime) }}</p>
            </div>
          </div>
          <div class="register-status">
            <el-tag :type="register.registerStatus === 3 ? 'success' : 'info'">
              {{ register.registerStatus === 3 ? '已完成' : '待就诊' }}
            </el-tag>
          </div>
        </div>
      </el-card>
    </div>

    
    </div>
  </ContentWrap>


  <ContentWrap>
    <div class="rating-container">
      <h2>全部挂号记录</h2>
      <div class="register-cards">
        <el-card
          v-for="register in registerListAll"
          :key="register.id"
          class="register-card"
          @click="openRatingForm(register)"
        >
          <div class="card-content">
            <div class="doctor-info">
              <h3>{{ register.doctorName }}</h3>
              <div class="info-text">
                <p>{{ register.deptName }}</p>
                <p>{{ formatDate(register.date) }}</p>
                <p>{{ formatTime(register.consultingTime) }}</p>
              </div>
            </div>
            <div class="register-status">
              <el-tag :type="register.registerStatus === 3?'success' : 'info'">
                {{ register.registerStatus === 3? '已完成' : '待就诊' }}  
              </el-tag>
            </div>
          </div>
        </el-card>
      </div>
     
    </div>
  </ContentWrap>
  
  <el-dialog
  v-model="dialogVisible"
  :title="currentRegister.registerStatus === 3 ? '就诊评价' : '挂号详情'"
  width="30%"
>
  <div v-if="currentRegister.registerStatus === 3">
    <RatingForm 
      :doctor-id="currentDoctorId"
      :patient-id="patientId"
      @submit="handleRatingSubmit"
    />
  </div>
  <div v-else>
    <p>医师: {{ currentRegister.doctorName }}</p>
    <p>科室: {{ currentRegister.deptName }}</p>
    <p>日期: {{ formatDate(currentRegister.date) }}</p>
    <p>时间: {{ formatTime(currentRegister.consultingTime) }}</p>
    
    <div style="margin-top: 20px; text-align: center">
      <el-button 
        type="danger" 
        @click="handleCancelRegister"
        
      >
        取消挂号
      </el-button>
    </div>
  </div>
</el-dialog>
  
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as RegisterApi from '@/api/medical/register'
import { ElMessage } from 'element-plus'
import { getUserProfile } from '@/api/system/user/profile'
import RatingForm from './components/RatingForm.vue'

const registerList = ref([])
const registerListAll = ref([]) // 全部挂号记录list
const dialogVisible = ref(false)
const currentDoctorId = ref('')
const message = useMessage()
const patientId = ref() // 用户id

const formatTime = (timeArray) => {
  if (!Array.isArray(timeArray) || timeArray.length !== 2) {
    return '未知时间'
  }
  const [hours, minutes] = timeArray
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
}

const getUserInfo = async () => {
  const users = await getUserProfile()
  patientId.value = users.id
}

const fetchRegisterList = async () => {
  try {
    const currentDate = new Date().toISOString().split('T')[0]
    console.log(currentDate)
    const res = await RegisterApi.getUserRecentRegisterList(patientId.value, currentDate)
    console.log(res)
    registerList.value = res
    
  } catch (error) {
    console.error('获取挂号记录失败:', error)
  }
}

const fetchAllList = async () => {
  try {
    const res = await RegisterApi.getUserRegisterList(patientId.value)
    console.log(res)
    registerListAll.value = res
  } catch (error) {
    console.error('获取挂号记录失败:', error)
  }
}

const openRatingForm = (register) => {
  currentRegister.value = register // 存储当前选中的挂号记录，用于取消挂号和查看评价详情
  // 打开评价表单
  currentDoctorId.value = register.doctorId
  dialogVisible.value = true
}

const handleRatingSubmit = (formData) => {
  // 处理评价提交
  console.log('评价数据:', formData)
  dialogVisible.value = false
  ElMessage.success('评价提交成功')
}

const formatDate = (dateString) => {
  // 格式化日期显示
  return new Date(dateString).toLocaleDateString()
}

const currentRegister = ref({}) // 当前选中的挂号记录


const handleCancelRegister = async () => {
  try {
    await RegisterApi.cancelRegister(currentRegister.value.id)
    message.success('挂号已取消')
    dialogVisible.value = false
    fetchRegisterList()
    fetchAllList()
  } catch (error) {
    message.error('取消挂号失败')
    console.error('取消挂号失败:', error)
  }
}


onMounted( async () => {
  await getUserInfo()
  fetchRegisterList()
  fetchAllList()
})
</script>

<style scoped>
.rating-container {
  padding: 20px;
}

.register-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.register-card {
  cursor: pointer;
  transition: all 0.3s;
}

.register-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
}

.card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.doctor-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.info-text h3 {
  margin: 0;
  font-size: 16px;
}

.info-text p {
  margin: 5px 0;
  font-size: 14px;
  color: #666;
}
</style>